import React, { Component } from 'react'
import {
    Alert,
    View,
    StyleSheet,
    Image,
    Text,
    Switch,
    TouchableOpacity,
    Linking
} from 'react-native'
import Layer from "src/components/Layer"
import { deviceWidth } from "src/util"
import navigationhelper from "src/components/navigationhelper"
import { inject } from "mobx-react/native"
import DeviceInfo from 'react-native-device-info';
import AuthVerSion from '../../../service/Auth'
import VersionAlertView from '../container/components/versionAlertView'

@inject('config', 'userAuth')

export default class ListItems extends Component<{}> {

   
    constructor (props) {
        super(props);
        this.state={
            isNewst:'',
            download_url:'',
            content:[],
            version:''
        }

    }

     data = [
        [
            {
                icon: require('src/assets/mine/yaoqing-icon.png'),
                title: '邀请好友',
                subTitle: undefined,
                rightMethod: 'arrow',
                jumpPage: 'Share',
            },
            {
                icon: require('src/assets/mine/shouyi.png'),
                title: '查看收益',
                subTitle: undefined,
                rightMethod: 'arrow'
            },
            {
                icon: require('src/assets/mine/userIdentify.png'),
                title: '实名认证',
                subTitle: undefined,
                jumpPage: 'UserIdentity',
                rightMethod: 'arrow'
            },
        ],
         [
            {
                icon: require('src/assets/mine/contactUs.png'),
                title: '联系我们',
                subTitle: this.props.config.config.customer.phone,
                rightMethod: 'arrow'
            },
            {
                icon: require('src/assets/mine/versionInfo.png'),
                title: '版本信息',
                subTitle: DeviceInfo.getVersion(),
                rightMethod: 'arrow'
            }
        ]
    ]

    getPhoneInfo =()=>{
        AuthVerSion.getPhoneInfo({
            system: DeviceInfo.getSystemName(),
            appVersion: DeviceInfo.getVersion(),
            version: DeviceInfo.getSystemVersion(),
            phone_model: DeviceInfo.getModel(),
            uuuid: DeviceInfo.getUniqueID()
        }).then((res) => {
            if (res.status == 'success') {
                this.setState({
                    isNewst:res.data.version.newest,
                    download_url:res.data.version.download_url,
                    content:res.data.version.update_content,
                    version:res.data.version.version,
                })
            }

        }).catch((error) => {
            Layer.showMsg(error.message)
        })
    }

   componentDidMount=()=>{
    this.getPhoneInfo()
   }



    render() {
        const {isNewst,download_url,content,version} = this.state

        return (
            <View style={{marginTop:20}}>
                {
                    this.data.map((list, lindex) => {
                        return (
                            <View style={{marginBottom:20,backgroundColor:'#fff', marginLeft:16,marginRight:16}}>
                            {   
                                list.map((item, index) => {
                                    return (
                                        <View key={index}>
                                            <RenderCell item={item} action={() => {
                                                if (item.jumpPage) {
                                                    if (item.jumpPage === 'UserIdentity') {
                                                        if (this.props.userAuth.currentUser.real_name_status === 1) {
                                                            return Layer.showMsg('您已经实名认证过了')
                                                        }
                                                    }
                                                    return navigationhelper.push(item.jumpPage)
                                                }
                                                if (item.title == '联系我们') {
                                                    let tel = `tel:${item.subTitle}`// 目标电话
                                                    Alert.alert('提示', `确认拨打客服${item.subTitle}`,
                                                        [{ text: '取消', onPress: () => { console.log('取消') } },
                                                        {
                                                            text: '确定',
                                                            onPress: () => {
                                                                Linking.canOpenURL(tel).then((supported) => {
                                                                    if (!supported) {
                                                                        console.log('Can not handle tel:' + tel)
                                                                    } else {
                                                                        return Linking.openURL(tel)
                                                                    }
                                                                }).catch(error => console.log('tel error', error))
                                                            }
                                                        }])
                                                }
                                                if(item.title == '版本信息'){
                                                    if(isNewst == 1){
                                                        this.regModal.showOrDismiss(true)
                                                        }
                                                else{
                                                    Layer.showMsg('当前已是最新版本')
                                                }
                                                }
                                            
                                            }} />
                                            {index !== list.length - 1 && <View style={{ marginLeft: 16, height: 1, backgroundColor: '#EEEEEE', width: deviceWidth - 16 }} />}
            
                                            <VersionAlertView
                                                callback={()=>{
                                                    this.regModal.showOrDismiss(false)
                                                    Linking.openURL(download_url).catch(err => Layer.showMsg('跳转失败'));
                                                }}
                                                content={content}
                                                version={version}
                                                isVisible={false}
                                                ref={i => this.regModal = i}
                                            />
                                        </View>
                                    )
                                })
                            }
                            </View>
                        )
                    })
                }
            </View>
        )
    }
}

// 中间的小按钮
function RenderCell(props) {

    return (
        <TouchableOpacity
            activeOpacity={0.8}
            style={styles.itemButton}
            onPress={props.action}
            changeOpacity>
            <Image
                style={{ width: 18, height: 18 }}
                source={props.item.icon} />
            <Text style={{ marginLeft: 15, fontSize: 15, lineHeight: 21, color: '#2E2E2E', fontFamily: 'PingFang SC' }}>{props.item.title}</Text>
            <View style={{ flex: 1 }} />
            {props.item.subTitle && <Text style={{ marginRight:10,color: '#D2D2D2', fontSize: 14, lineHeight: 20, fontFamily: 'PingFang SC' }}>{props.item.subTitle}</Text>}

            {props.item.rightMethod === 'arrow' ? <Image
                style={{ width: 24, height: 24 }}
                source={require('src/assets/mine/arrowRightGrey.png')} />:props.item.rightMethod === 'checkBox' ? <Switch />:null}
        </TouchableOpacity>
    )
}
const styles = StyleSheet.create({
    itemButton: {
        paddingLeft: 16,
        paddingRight: 11,
        height: 50,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center'
    }
})